@charset "utf-8";

@import "reset";

@function r($px){
    @return ($px/40)*1rem;
}
// 减半
@function half($px){
    @return ($px/2)*1px;
}

html,body{
    height: 100%;
    position: relative;
}
// 头部
header{
    position: absolute;
    top: 0;
    width: r(750);
    height: half(150);
    padding: half(48) half(23);
    box-sizing: border-box;
    .back{
        width: 59px;
        height: 26px;
        border: 2px solid #ff9344;
        line-height: 26px;
        text-align: center;
        border-radius: 25px;
        a{
            color: black;
            font-size: 21px;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .title{
        font-size: 20px;
        text-align: center;
    }
    
    .selectBar{
        width: half(159);
        height: half(56);
        border: solid 1px #ff9344;
        background-image: url(../img/dsjx_09.jpg);
        background-repeat: no-repeat;
        background-position: right 4px center;
        background-size: 15px 8px;
        select{
            -webkit-appearance: none;
            appearance: none;
            border: none;
            height: 100%;
            width: 100%;
            display: block;
            background: transparent;
        }
    }
}

section{
    position: absolute;
    width: r(750);
    top: half(140);
    bottom: half(160);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
    .st1{
        width: 100%;
        padding-left: r(28);
        padding-right: r(28);
        box-sizing: border-box;
        img{
            width: r(148);
        }
        .st1-1{
            div{
                width: 25%;
                text-align: center;
                a{
                    font-size: r(26);
                    color: black;
                }
            }
        }
        .ddd{
            text-align: center;
            span{
                display: inline-block;
            }
            .yuan{
                width: r(18);
                height: r(18);
                border-radius: 50px;
                background-color: #ff9344;
            }
            .yuan1{
                width: r(18);
                height: r(18);
                border-radius: 50px;
                background-color: #ffc9a1;
            }
        }
    }
    .st2{
        width: 100%;
        height: r(64);
        box-sizing: border-box;
        padding-left: r(30);
        padding-right: r(21);
        .lef{
            font-size: r(30);
            line-height: r(64);
            img{
                width: r(56);
                vertical-align: middle;
            }
        }
        .rig{
            font-size: r(25);
            line-height: r(64);
            a{
                color: black;
            }
            img{
                width: r(24);
                vertical-align: middle;
            }
        }
    }
    .st3{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(40);
        padding-top: r(37);
        padding-bottom: r(36);
        font-size: 0;
        div{
            width: 25%;
        }
        img{
            width: r(132);
        }
    }
    .st4{
        width: 100%;
        height: r(64);
        box-sizing: border-box;
        padding-left: r(30);
        padding-right: r(21);
        .lef{
            font-size: r(30);
            line-height: r(64);
            img{
                width: r(47);
                vertical-align: middle;
            }
        }
        .rig{
            font-size: r(25);
            line-height: r(64);
            a{
                color: black;
            }
            img{
                width: r(24);
                vertical-align: middle;
            }
        }
    }
    .st5{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(40);
        padding-top: r(37);
        padding-bottom: r(36);
        font-size: 0;
        div{
            width: 25%;
        }
        img{
            width: r(132);
        }
    }
    .st6{
        width: 100%;
        height: r(64);
        box-sizing: border-box;
        padding-left: r(30);
        padding-right: r(21);
        .lef{
            font-size: r(30);
            line-height: r(64);
            img{
                width: r(53);
                vertical-align: middle;
            }
        }
        .rig{
            font-size: r(25);
            line-height: r(64);
            a{
                color: black;
            }
            img{
                width: r(24);
                vertical-align: middle;
            }
        }
    }
    .st7{
        width: 100%;
        box-sizing: border-box;
        padding-left: r(40);
        padding-top: r(37);
        padding-bottom: r(50);
        font-size: 0;
        div{
            width: 25%;
        }
        img{
            width: r(132);
        }
    }
}





// 底部
footer{
    position: absolute;
    left: 0;
    bottom: 0;
    width: r(750);
    height: half(135);
    li{
        width: 25%;
        text-align: center;
        .iconfont{
            font-size: 36px;
            color: white;
            -webkit-text-stroke: 1px #FF9344;
        }
        p{
            font-size: 13px;
            color: black;
        }
        .icon-classify1{
            color: #FF9344;
        }
    }
}